<template>
  <div>
    <my-form-drawer :title="title" :width="500" :visible="visible" :layout="layout" @ok="editSave" @cancel="onClose">
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-form-model-item label="角色名称" prop="name">
          <a-input v-model="form.name" :maxLength="10" />
        </a-form-model-item>
        <a-form-model-item label="角色描述" prop="remark">
          <a-textarea v-model="form.remark" allow-clear :maxLength="80" :autosize="{ minRows: 4, maxRows: 6 }" />
        </a-form-model-item>
      </a-form-model>
    </my-form-drawer>
  </div>
</template>

<script>
import { update } from '@/services/role';
import MyFormDrawer from '@/components/drawer/MyFormDrawer';

export default {
  name: 'roleEditForm',
  components: { MyFormDrawer },
  props: {
    visible: {
      type: Boolean,
      required: false,
      default: false,
    },
    info: {
      type: Object,
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.editInfo();
      }
    },
  },
  data() {
    return {
      title: '编辑角色',
      layout: 'vertical',
      form: {
        id: '',
        name: '',
        remark: '',
        enabled: true,
        sortNo: 1,
      },
      rules: {
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
      },
    };
  },
  methods: {
    onClose() {
      this.$emit('closeEditForm', false);
    },
    editInfo() {
      this.form.name = this.info.name;
      this.form.remark = this.info.remark;
      this.form.id = this.info.id;
    },
    editSave() {
      this.$refs.ruleForm.validate((vaild) => {
        if (!vaild) {
          return false;
        }
        if (vaild) {
          update(this.form).then((res) => {
            if (res.data.code == 0) {
              this.$message.success('修改成功');
              this.onClose();
            }
          });
        }
      });
    }
  },
};
</script>

<style scoped>
</style>
